<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import DetailHot from './components/DetailHot.vue';
import ImageView from '@/components/ImageView/index.vue';
import XtxSku from "@/components/XtxSku/index.vue"
import { ElMessage } from 'element-plus';
import { useCartStore } from '@/stores/cart';

const cartStore = useCartStore();

const goods = ref([]);
const route = useRoute();
async function getGoods() {
	// const res = await getDetailAPI(route.params.id);
	// goods.value = res.result;
	goods.value = {
		id: '1000234',
		name: '毛毛虫子儿童运动鞋',
		desc: '抓绒保暖，防滑耐磨，儿童冬季必备',
		price: 159.00,
		oldPrice: 209.00,
		salesCount: 2356,
		commentCount: 1289,
		collectCount: 876,
		brand: {
			name: '毛毛虫童装',
			id: 'brand123'
		},
		category: [
			{ id: '1005000', name: '童鞋' },
			{ id: '1005001', name: '运动鞋' }
		],
		details: {
			properties: [
				{ name: '材质', value: '棉+抓绒' },
				{ name: '尺码', value: '25-30码' },
				{ name: '适用年龄', value: '3-6岁' }
			],
			pictures: [
				'https://picsum.photos/800/800?random=1',
				'https://picsum.photos/800/800?random=2',
				'https://picsum.photos/800/800?random=3'
			]
		},
		// SKU规格信息
		specs: [
			{
				name: '颜色',
				values: [
					{ name: '粉色', picture: 'https://picsum.photos/50/50?random=4' },
					{ name: '蓝色', picture: 'https://picsum.photos/50/50?random=5' }
				]
			},
			{
				name: '尺码',
				values: [
					{ name: '25码' },
					{ name: '26码' },
					{ name: '27码' }
				]
			}
		],
		// SKU组合信息
		skus: [
			{
				id: 'sku001',
				price: 159.00,
				oldPrice: 209.00,
				inventory: 100,
				specs: [
					{ name: '颜色', valueName: '粉色' },
					{ name: '尺码', valueName: '25码' }
				]
			},
			{
				id: 'sku002',
				price: 159.00,
				oldPrice: 209.00,
				inventory: 80,
				specs: [
					{ name: '颜色', valueName: '粉色' },
					{ name: '尺码', valueName: '26码' }
				]
			},
			{
				id: 'sku003',
				price: 159.00,
				oldPrice: 209.00,
				inventory: 120,
				specs: [
					{ name: '颜色', valueName: '蓝色' },
					{ name: '尺码', valueName: '25码' }
				]
			},
			{
				id: 'sku004',
				price: 159.00,
				oldPrice: 209.00,
				inventory: 0, // 无库存
				specs: [
					{ name: '颜色', valueName: '蓝色' },
					{ name: '尺码', valueName: '26码' }
				]
			},
			{
				id: 'sku005',
				price: 159.00,
				oldPrice: 209.00,
				inventory: 60,
				specs: [
					{ name: '颜色', valueName: '粉色' },
					{ name: '尺码', valueName: '27码' }
				]
			}
		],
		services: [
			'无忧退货',
			'快速退款',
			'免费包邮'
		]
	};
};
onMounted(() => {
	getGoods();
});

let skuObj = {};
function skuChange(sku) {
	console.log(sku);
	skuObj = sku;
}

const count = ref(1);
function countChange() {

}

function addCart() {
	if (skuObj.skuId) {
		cartStore.addCart({
			// id: goods.value.id,
			// name: goods.value.name,
			// price: goods.value.price,
			count: count.value,
			skuId: skuObj.skuId,
			// attrsText: skuObj.specsText,
			// selected: true
		});
	}
	else {
		ElMessage.warning("请选择规格");
	}
}
</script>

<template>
	<div class="xtx-goods-page">
		<div class="container" v-if="goods.details">
			<div class="bread-container">
				<el-breadcrumb separator=">">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: `/category/${goods.category[1]?.id}` }">
						{{ goods.category[1]?.name }}
					</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: `/category/${goods.category[0]?.id}` }">
						{{ goods.category[0]?.name }}
					</el-breadcrumb-item>
					<el-breadcrumb-item>抓绒保暖，毛毛虫子儿童运动鞋</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!-- 商品信息 -->
			<div class="info-container">
				<div>
					<div class="goods-info">
						<div class="media">
							<!-- 图片预览区 -->
							<ImageView></ImageView>
							<!-- 统计数量 -->
							<ul class="goods-sales">
								<li>
									<p>销量人气</p>
									<p> {{ goods.salesCount }}+ </p>
									<p><i class="iconfont icon-task-filling"></i>销量人气</p>
								</li>
								<li>
									<p>商品评价</p>
									<p>{{ goods.commentCount }}+</p>
									<p><i class="iconfont icon-comment-filling"></i>查看评价</p>
								</li>
								<li>
									<p>收藏人气</p>
									<p>{{ goods.collectCount }}+</p>
									<p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
								</li>
								<li>
									<p>品牌信息</p>
									<p>{{ goods.brand.name }}</p>
									<p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
								</li>
							</ul>
						</div>
						<div class="spec">
							<!-- 商品信息区 -->
							<p class="g-name"> {{ goods.name }} </p>
							<p class="g-desc">{{ goods.desc }} </p>
							<p class="g-price">
								<span>{{ goods.oldPrice }}</span>
								<span> {{ goods.price }}</span>
							</p>
							<div class="g-service">
								<dl>
									<dt>促销</dt>
									<dd>12月好物放送，App领券购买直降120元</dd>
								</dl>
								<dl>
									<dt>服务</dt>
									<dd>
										<span>无忧退货</span>
										<span>快速退款</span>
										<span>免费包邮</span>
										<a href="javascript:;">了解详情</a>
									</dd>
								</dl>
							</div>
							<!-- sku组件 -->
							<XtxSku :goods="goods" @change="skuChange"></XtxSku>
							<!-- 数据组件 -->
							<el-input-number v-model="count" @change="countChange"></el-input-number>
							<!-- 按钮组件 -->
							<div>
								<el-button size="large" class="btn" @click="addCart">
									加入购物车
								</el-button>
							</div>

						</div>
					</div>
					<div class="goods-footer">
						<div class="goods-article">
							<!-- 商品详情 -->
							<div class="goods-tabs">
								<nav>
									<a>商品详情</a>
								</nav>
								<div class="goods-detail">
									<!-- 属性 -->
									<ul class="attrs">
										<li v-for="item in goods.details.properties" :key="item.value">
											<span class="dt">{{ item.name }}</span>
											<span class="dd">{{ item.value }}</span>
										</li>
									</ul>
									<!-- 图片 -->
									<img v-for="img in goods.details.pictures" :src="img" :key="img" alt="">
								</div>
							</div>
						</div>
						<!-- 24热榜+专题推荐 -->
						<div class="goods-aside">
							<DetailHot :hotType="1"></DetailHot>
							<DetailHot :hotType="2"></DetailHot>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>


<style scoped lang='scss'>
.xtx-goods-page {
	.goods-info {
		min-height: 600px;
		background: #fff;
		display: flex;

		.media {
			width: 580px;
			height: 600px;
			padding: 30px 50px;
		}

		.spec {
			flex: 1;
			padding: 30px 30px 30px 0;
		}
	}

	.goods-footer {
		display: flex;
		margin-top: 20px;

		.goods-article {
			width: 940px;
			margin-right: 20px;
		}

		.goods-aside {
			width: 280px;
			min-height: 1000px;
		}
	}

	.goods-tabs {
		min-height: 600px;
		background: #fff;
	}

	.goods-warn {
		min-height: 600px;
		background: #fff;
		margin-top: 20px;
	}

	.number-box {
		display: flex;
		align-items: center;

		.label {
			width: 60px;
			color: #999;
			padding-left: 10px;
		}
	}

	.g-name {
		font-size: 22px;
	}

	.g-desc {
		color: #999;
		margin-top: 10px;
	}

	.g-price {
		margin-top: 10px;

		span {
			&::before {
				content: "¥";
				font-size: 14px;
			}

			&:first-child {
				color: $priceColor;
				margin-right: 10px;
				font-size: 22px;
			}

			&:last-child {
				color: #999;
				text-decoration: line-through;
				font-size: 16px;
			}
		}
	}

	.g-service {
		background: #f5f5f5;
		width: 500px;
		padding: 20px 10px 0 10px;
		margin-top: 10px;

		dl {
			padding-bottom: 20px;
			display: flex;
			align-items: center;

			dt {
				width: 50px;
				color: #999;
			}

			dd {
				color: #666;

				&:last-child {
					span {
						margin-right: 10px;

						&::before {
							content: "•";
							color: $xtxColor;
							margin-right: 2px;
						}
					}

					a {
						color: $xtxColor;
					}
				}
			}
		}
	}

	.goods-sales {
		display: flex;
		width: 400px;
		align-items: center;
		text-align: center;
		height: 140px;

		li {
			flex: 1;
			position: relative;

			~li::after {
				position: absolute;
				top: 10px;
				left: 0;
				height: 60px;
				border-left: 1px solid #e4e4e4;
				content: "";
			}

			p {
				&:first-child {
					color: #999;
				}

				&:nth-child(2) {
					color: $priceColor;
					margin-top: 10px;
				}

				&:last-child {
					color: #666;
					margin-top: 10px;

					i {
						color: $xtxColor;
						font-size: 14px;
						margin-right: 2px;
					}

					&:hover {
						color: $xtxColor;
						cursor: pointer;
					}
				}
			}
		}
	}
}

.goods-tabs {
	min-height: 600px;
	background: #fff;

	nav {
		height: 70px;
		line-height: 70px;
		display: flex;
		border-bottom: 1px solid #f5f5f5;

		a {
			padding: 0 40px;
			font-size: 18px;
			position: relative;

			>span {
				color: $priceColor;
				font-size: 16px;
				margin-left: 10px;
			}
		}
	}
}

.goods-detail {
	padding: 40px;

	.attrs {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30px;

		li {
			display: flex;
			margin-bottom: 10px;
			width: 50%;

			.dt {
				width: 100px;
				color: #999;
			}

			.dd {
				flex: 1;
				color: #666;
			}
		}
	}

	>img {
		width: 100%;
	}
}

.btn {
	margin-top: 20px;

}

.bread-container {
	padding: 25px 0;
}
</style>